<template>
	<a-spin dot :loading="loading">
		<a-watermark class="watermark" content="宝山文旅" grayscale>
			<view class="top-menu">
				<!-- <a-menu mode="horizontal" :selected-keys="active" @menu-item-click="menuClick">
					<a-menu-item key="0">
						<template #icon><icon-home /></template>宝山有礼项目参赛投票
					</a-menu-item>
					<a-menu-item key="1">统计</a-menu-item>
				</a-menu> -->
				<view class="top-desc" style="margin-top: 20px;">宝山文旅诚邀您为心仪产品投出宝贵一票</view>
				<view class="top-desc">共同助力本土文旅风采！</view>
				<view style="margin-top: 14px;"> <a-tag color="orange" bordered>本投票仅可单选</a-tag></view>
			</view>
			<view class="task-list">
				<view v-if="dataLoading" style="display: flex;justify-content: center;margin-bottom: 10px;">
					<view class="loader"></view>
				</view>
				<WorkItem v-for="work in PageData.List" :key="work.id" :info="work" />
			</view>
		</a-watermark>
	</a-spin>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import WorkItem from '@/components/WorkItem.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import VoteApi from '@/VoteApi';

	const UUID = uni.getStorageSync('UUID')
	const PageData = ref({
		List: [],
		Record: {},
	});
	const active = ref('')
	const loading = ref(true);
	const dataLoading = ref(false)

	onLoad(options => {
		setTimeout(() => {
			menuClick(options.active || '0')
			loading.value = false
		}, 300)

		console.info(uni.getStorageSync("UUID"))
	})

	const menuClick = (e) => {
		if (e == active.value) {
			console.log('重复点击')
			return
		}
		PageData.value.List.value = []
		dataLoading.value = true
		active.value = e
		setTimeout(() => {
			ListData()
		}, 400)
	}

	const ListData = () => {
		VoteApi.List(UUID).then(resp => {
			dataLoading.value = false
			loading.value = false
			PageData.value.Record = resp.data.Record
			PageData.value.List = resp.data.List
			if (PageData.value.Record) {
				PageData.value.List = PageData.value.List.map(work => {
					return {
						...work,
						vote: PageData.value.Record.voteId === work.id ? PageData.value.Record : {}
					}
				})
			}
		})
	}
</script>

<style scoped lang="scss">
	.top-menu {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		width: 100vw;
		top: 0;
		z-index: 6;
		background: #FFF;
		padding-bottom: 20px;

		.top-desc {
			font-size: 14px;
			color: #333;
			line-height: 22px;
			font-weight: 600;
		}
	}



	.task-list {
		padding: 142px 20px 12px;

		.loader {
			width: 32px;
			height: 32px;
			position: relative;
			animation: rotate 1.5s ease-in infinite alternate;
		}

		.loader::before {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			color: #165DFF;
			background: currentColor;
			width: 32px;
			height: 16px;
			border-radius: 0 0 50px 50px;
		}

		.loader::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 10%;
			background: #FFF;
			width: 4px;
			height: 32px;
			animation: rotate 1.2s linear infinite alternate-reverse;
		}

		@keyframes rotate {
			100% {
				transform: rotate(360deg)
			}
		}

	}

	::v-deep .arco-menu-overflow-wrap {
		display: flex !important;
		justify-content: center !important;
	}
</style>